<template>
  <div class="about">
    <h1>这是体系页面</h1>
    <ul class="oneMenu">
      <li v-for="(item,idx) in menuList" :key="idx" @click="show(idx)">{{item.name}}</li>
    </ul>
    <Twomenu :menuData="twoMenuData"></Twomenu>
  </div>
</template>

<script>
import { getData } from '@/api'
import Twomenu from '@/components/Twomenu.vue'

export default {
  name: "system",
  components:{
    Twomenu
  },
  data(){
    return {
      menuList:[],
      twoMenuData:[]
    }
  },
  created() {
    getData("/api/tree/json").then(res=>{
      console.log(res.data.data)
      res.data.data.forEach(val=>{
        this.menuList.push({
          name: val.name,
          children: val.children
        })
      })
    })
  },
  methods: {
    show(i){
      this.twoMenuData = this.menuList[i].children
    }
  },
}
</script>

<style lang="less">
.oneMenu{
  margin: 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-wrap: wrap;
  li{
    cursor: pointer;
    padding:4px;
    margin:4px;
    border-radius:4px;
    background:#f6f6f6;
    &:hover{
      background:#e6e6e6;
    }
    &:active{
      background:#d6d6d6;
    }
  }
}
</style>